<template>  
    <div>  
        <el-popover  
            placement="bottom"  
            :width="1700"  
            trigger="hover"
            v-model:visible="showService"  
        >  
            <template #reference>  
                <el-button text style="align-items: center; font-size: 20px;" @click="togglePopover">社区服务</el-button>  
            </template>  
            <div class="first_div">  
                <div class="link-group" style="margin-left: 300px;">  
                    <div>
                        <el-image :src="url_fix" style="display: flex; width: 50px; height: 50px;"></el-image>
                        <el-link class="link-text" @click="navigate('/community/repair')">报事维修</el-link>  
                    </div>
                    <div style="margin-top: 80px; font-style:initial;">
                        <el-image :src="url_visitor" style="display: flex; width: 50px; height: 50px;"></el-image>  
                        <el-link class="link-text" @click="navigate('/community/visitors')">访客登记</el-link>
                    </div>  
                </div>  
                <div class="link-group">        
                    <div>
                        <el-image :src="url_advice" style="display: flex; width: 50px; height: 50px;"></el-image>  
                        <el-link class="link-text" @click="navigate('/community/complaints')">投诉建议</el-link>  
                    </div>
                    <div style="margin-top: 80px;"> 
                        <el-image :src="url_notice" style="display: flex; width: 50px; height: 50px;"></el-image>  
                        <el-link class="link-text" @click="navigate('/community/notice')">公告查看</el-link>  
                    </div>    
                </div>  
                <div class="link-group">    
                    <div>
                        <el-image :src="url_property" style="display: flex; width: 50px; height: 50px;"></el-image>
                        <el-link class="link-text" @click="navigate('/community/payment')">物业缴费</el-link> 
                    </div>  
                    <div style="margin-top: 80px;">  
                        <el-image :src="url_car" style="display: flex; width: 50px; height: 50px;"></el-image>
                        <el-link class="link-text" @click="navigate('/community/parking')">车位绑定</el-link>  
                    </div> 
                </div> 
                <div class="divider" id="divider">      
                    <hr />  
                </div>
                <div class="image-group">
                    <div>
                        <el-image :src = "url" width="150px" height="150px"></el-image>   
                    </div>
                    <div style="width: 270px; ">
                        <el-text type="info" style="font-family:Arial, Helvetica, sans-serif ;font-style: italic;">
                            社区服务功能是现代城市生活中不可或缺的一部分，它旨在通过一系
                            列便利、高效、贴心的服务，提升居民的生活质量，增强社区凝聚力，营造
                            和谐宜居的生活环境。
                        </el-text>
                    </div>
                </div>   
            </div>  
        </el-popover>  
    </div>  
</template>  
  
<script setup>  
    import router from '@/router';
import { ref } from 'vue';  
    const url = '/images/menu_picture/社区服务站.png'
    const url_fix='/images/menu_picture/报事维修.png'
    const url_advice='/images/menu_picture/投诉建议.png'
    const url_property='/images/menu_picture/物业缴费.png'
    const url_visitor='/images/menu_picture/访客登记.png'
    const url_notice='/images/menu_picture/公告查看.png'
    const url_car='/images/menu_picture/车位绑定.png'

    const showService = ref(false)
  
  const togglePopover = () => {
    showService.value = !showService.value
  }
  const turnRoute=ref({
    repair: '/community/repair',
    parking: '/community/parking'
}
  )
  const navigate=(path)=>{
    router.push(path)
    showService.value=false
  }
</script>  
  
<style scoped lang="scss">
    .first_div{
        display: flex;
    }
    .el-button + .el-button {  
        margin-left: 8px;  
    }  
    .link-text{
        font-size: large;
        font-weight: 500;
    }
    .link-group {  
        display: flex;  
        flex-direction: column;  
        margin-left: 150px;
        margin-top: 50px;
        font-size: large;  
    }
    .image-group{
        display: flex;  
        flex-direction: column;  
        margin-left: 50px;
        margin-top:  50px;   
    }  
    .divider { 
        hr {
            margin-left: 150px;
            margin-top: 50px;
            margin-bottom: 50px;  
            width: 1px;// 移除默认的边框样式  
            height: 300px; // 设置分隔线的高度  
            background-color: #000000; // 设置分隔线的颜色  
        }
    }  
</style>